<template>
  <div class="edit box">
    <div>
      <p>
        <i class="icon-bitian iconfont"></i>业务名称
        <el-input v-model="name" placeholder="请输入业务名称" maxlength="30" size="normal" @input="ifChange"></el-input>
      </p>
      <p>
        <i class="icon-bitian iconfont"></i>系统名称
        <el-select v-model="sysId" placeholder="请选择系统名称" size="normal" @change="ifChange">
          <el-option
              v-for="item in systemList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </p>
      <p>
        <i class="icon-bitian iconfont"></i>传输配置
        <el-select v-model="transmissionId" placeholder="请选择传输配置" size="normal" @change="ifChange">
          <el-option
              v-for="item in transmissionList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </p>
      <p>
        &#12288;&#12288;&#12288;状态
        <el-switch
            @change="ifChange"
            v-model="status"
            active-color="#1e9ffe"
            inactive-color="#BFBFBF"
            active-value="start"
            inactive-value="stop"
            :width="56"
            :class="{ 'switch-is-actived': status === 'start' }"
        >
        </el-switch>
      </p>
      <p>
        &#12288;&#12288;&#12288;备注
        <el-input
            @input="ifChange"
            size="normal"
            type="textarea"
            maxlength="100"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="remarks"
            resize="none">
        </el-input>
      </p>
      <p>
        <el-button type="primary" round size="normal" @click="editBusiness">确认</el-button>
        <el-button round size="normal" @click="()=>{$router.push('/configManage/businessManage')}">取消</el-button>
      </p>
    </div>

  </div>
</template>

<script>
export default {
  name: "businessEdit",
  components:{},
  data(){
    return{
      isChange:false,
      isSubmit:false,
      systemList:[],
      transmissionList:[],
      transmissionId:'',
      sysId:'',
      transmissionName:'',
      sysName:'',
      name:'',
      remarks:'',
      status:''
    }
  },
  created() {
    this.getSystemList();
    this.getTransmissionList();
    this.getBusiness()
  },
  // 路由离开守卫
  beforeRouteLeave(to , from , next){
    // 如果已提交或未修改 则可以离开
    if(this.isSubmit || !this.isChange){
      next();
    }else{
      // 如果已修改或未提交 则弹窗提示
      this.changeTips();
      next(false);
    }
  },
  methods:{
    ifChange(){
      this.isChange =true;
    },
     // 修改提醒
    changeTips() {
      this.$confirm('检测到未提交的内容，是否在离开页面前提交修改？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '提交',
        cancelButtonText: '放弃修改'
      })
          .then(() => {
            // 进行提交
            this.editBusiness();
          })
          .catch(action => {
            // 如何是选择放弃保存并离开页面
            if(action === 'cancel'){
              this.isChange = false;
              this.$router.push('/configManage/businessManage');
            }
            this.$message({
              type: 'info',
              message: action === 'cancel'
                  ? '放弃提交并离开页面'
                  : '停留在当前页面'
            })
          });
    },
    getSystemList(){
      this.$Http.systemListAll().then(res => {
        this.systemList = res.data;
        console.log(res);
      })
    },
    getTransmissionList(){
      this.$Http.transmissionListAll().then(res => {
        this.transmissionList = res.data;
      })
    },
    verify(){
      if(this.name ===""){
        this.$message.error("请填写业务名称");
        return false;
      }
      else if(this.name.length>100){
        this.$message.error("请填写正确格式的业务名称，不能超100个字符");
        return false;
      }
      else if(this.sysId ===""){
        this.$message.error("请选择所属系统");
        return false;
      }
      else if(this.transmissionId ===""){
        this.$message.error("请选择传输配置");
        return false;
      }
      else if(this.remarks.length>256){
        this.$message.error("请重新填写备注，不能超256个字符");
        return false;
      }
      else if(this.sysId ===""&&this.remarks ===""&&this.name ===""&&this.transmissionId ===""){
        this.$message.error("请填写所有信息");
        return false;
      }
      else{
        return true;
      }
    },
    getBusiness(){
      this.$Http.businessView({
        id:this.$route.query.id
      }).then((res)=> {
        if (res.code === "SUCCESS") {
          this.name = res.data.name;
          this.transmissionId = res.data.transmissionId;
          this.sysId = res.data.sysId;
          this.createBy = res.data.createBy;
          this.createDate = res.data.createDate;
          this.updateDate = res.data.updateDate;
          this.updateBy = res.data.updateBy;
          this.status = res.data.status;
          this.remarks = res.data.remarks;
        }
        else {
          this.$message.error("操作错误，请重新操作")
        }
      })
    },
    editBusiness() {
      if(this.verify()){
          this.$Http.businessEdit({
          id:this.$route.query.id,
          sysId:this.sysId,
          remarks:this.remarks,
          status:this.status,
          name:this.name,
          transmissionId:this.transmissionId
        }).then(res => {
          if(res.code === "SUCCESS"){
            this.isSubmit = true;
            this.$message.success("修改成功");
            this.$router.push('/configManage/businessManage');
          }
          else{
            this.$message.error(res.message);
          }
        })
      }
    },

  }
}
</script>

<style scoped lang="scss">
@import "src/assets/css/content.scss";

</style>
